/**
 * LVL.UI - The LVL user interface.
 */

define(['blacksmith/game', 'lvl/config'], function() {


LVL.UI = {}


/**
 * Initialises the LVL.UI.
 */
LVL.UI.init = function() {
    
    this.focused = new LVL.UI.Component({style:CONFIG.styleUIFocused})
    this.attached = new LVL.UI.Strip({style:CONFIG.styleUIAttached})
    this.shop = new LVL.UI.Strip({style:CONFIG.styleUIShop})
    
}



/**
 * Shows information about specified component.
 * 
 * @param {LVL.Component} component
 */
LVL.UI.componentInfo = function(component) {
    
    this.focused = component
    
    LVL.UI.focused.setComponent(component)
    
} 



/**
 * Sets editing mode for focused component.
 * 
 * @param {boolean} edit
 */
LVL.UI.componentEdit = function(edit) {
    
    var c
    
    if (edit && this.focused)
        this.edit = this.focused
    else
        this.edit = null
    
    this.attached.div.innerHTML = ''
    
    if (!this.edit)
        return
    
    //if (LVL.Components.registered[this.edit.name].hasOwnProperty('children'))
    //    for (c in LVL.Components.registered[this.edit.name].children)
    //        LVL.UI.shopPanel.add(new LVL.UI.ComponentPanel({component:new LVL.Components.list[c].constructor()}))
    
    LVL.UI.attached.clear()
    for (c in this.edit.blocks) {
        c = this.edit.blocks[c]
        LVL.UI.attached.add(new LVL.UI.Component({component:c,style:CONFIG.styleUIComponent}))
    }
    
}



/**
 * Constructs an LVL.UI.Panel instance.
 * 
 * @param {object} args
 * @constructor
 */
LVL.UI.Panel = function(args) {
    
    args = args || {}
    
    this.div = BLACKSMITH.element(LVL.view, 'div', args.style)
    this.children = []
    
    if (args.onclick)
        this.div.addEventListener('click', args.onclick.bind(this))
    
}

LVL.UI.Panel.prototype.add = function(panel) {
    
    this.children.push(panel)
    this.div.appendChild(panel.div)
    
}

LVL.UI.Panel.prototype.remove = function(panel) {
    
    this.children.splice(this.children.indexOf(this.children), 1)
    this.div.removeChild(panel.div)
    
}

LVL.UI.Panel.prototype.clear = function() {
    
    this.children = []
    this.div.innerHTML = ''
    
}


/**
 * Constructs an LVL.UI.Component instance.
 * 
 * @constructor
 */
LVL.UI.Component = function(args) {
    
    LVL.UI.Panel.call(this, args)
    
    this.setComponent(args.component)
    
}

LVL.UI.Component.prototype = Object.create(LVL.UI.Panel.prototype)



/**
 * Sets the component the panel represents.
 * 
 * @param {LVL.Component} component
 */
LVL.UI.Component.prototype.setComponent = function(component) {
    
    this.component = component
    
    if (!component) {
        this.div.innerHTML = ''
        return
    }
    
    this.div.innerHTML = [
        '<table width="100%"><tbody>',
        '<tr><td><img src="{0}" width="80px"/></td></tr>'.format(LVL.Components.getImage(component.name)),
        '<tr><td>{0}</td></tr>'.format(component.name),
        '</tbody></table>'
    ].join('')
    
}



/**
 * Constructs an LVL.UI.Strip instance.
 * 
 * @constructor
 */
LVL.UI.Strip = function(args) {
    
    LVL.UI.Panel.call(this, args)
    
}

LVL.UI.Strip.prototype = Object.create(LVL.UI.Panel.prototype)




})